<template>
	<view class="page">
		<!-- <view class="head-back">
			<view class="back" @click="onBack">
				<text></text>
			</view>
			<view class="title">
				<text>我的订单</text>
			</view>
			<view class="more-icon">
				<view class="icon-list">
					<text class="iconfont icon-fadajing"></text>
				</view>
			</view>
		</view> -->
		<!-- 订单tab -->
			<u-sticky>
				<view class="order-tab">
					<view class="tab" :class="{'action':OrderType==-1}" @click="onOrderTab(-1)">
						<text>全部</text>
						<text class="line"></text>
					</view>
					<view class="tab" :class="{'action':OrderType==0}" @click="onOrderTab(0)">
						<text>待付款</text>
						<text class="line"></text>
					</view>
					<view class="tab" :class="{'action':OrderType==1}" @click="onOrderTab(1)">
						<text >待发货</text>
						<text class="line"></text>
					</view>
					<view class="tab" :class="{'action':OrderType==2}" @click="onOrderTab(2)">
						<text>待收货</text>
						<text class="line"></text>
					</view>
					<view class="tab" :class="{'action':OrderType==3}" @click="onOrderTab(3)">
						<text>已完成</text>
						<text class="line"></text>
					</view>
				</view>
			</u-sticky>
		
		<!-- 订单列表 -->
		<mescroll-body @init="mescrollInit" @down="downCallback" :empty="empty" @up="upCallback">
			<view class="order-list"  v-if="goodsList.length">
				<view class="list" v-for="(item,index) in goodsList" @click="onOrderList(item.id)" :key="index">
					<view class="title-status">
						<view class="title">
							<text>订单号:{{item.order_sn}}</text>
						</view>
						<view class="status" v-if="item.status==0">
							<text>待付款</text>
							<!-- <text class="iconfont icon-laji del"></text> -->
						</view>
						<view class="status" v-if="item.status==1">
							<text class="waiting">海关审核中</text>
							<!-- <text class="iconfont icon-laji del"></text> -->
						</view>
						<view class="status" v-if="item.status==2">
							<text>待收货</text>
							<!-- <text class="iconfont icon-laji del"></text> -->
						</view>
						<view class="status" v-if="item.status==3">
							<text>已完成</text>
							<!-- <text class="iconfont icon-laji del"></text> -->
						</view>
					</view>
					<view class="goods-list">
						<view class="goods" v-for="(g,ids) in item.items">
							<view class="thumb">
								<image :src="g.thumb" mode=""></image>
							</view>
							<view class="item box-1">
								<view class="goods-name" style="margin-bottom:20rpx;">
									<text class="two-omit">{{g.name}}</text>
								</view>
								<view class="goods-gg">{{g.spec}}</view>
								<view class="goods-price flex-box">
									<view class="box-1">
										<text class="min">￥</text>
										<text class="max">{{g.price}}</text>
										<!-- <text class="min">.00</text> -->
									</view>
									
									<view class="">
										x{{g.num}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="flex-box">
						<view class="item-mess box-1" style="color:#aaa;font-size:26rpx;">
							下单时间：{{item.create_time}}
						</view>
						<view class="" style="font-weight: bold;">
							实付款
							<text class="item-price">
								¥{{item.pay_price}}
							</text>
						</view>
					
					</view>
					<view class="status-btn">
						<view class="btn"  v-if="item.status==0" @tap.stop="cancel(item.id,index)">
							<text>取消订单</text>
						</view>
						<view class=" btn-count" v-if="item.status == 0" @tap.stop="confirmmeet(item.id,item)">
							去付款
						</view>
						<view class=" btn-count"   v-if="item.status == 2||item.status == 3" @tap.stop="tologistics(item.id,item.express_no)">
							查看物流
						</view>
						<view class=" btn-count"   v-if="item.status == 2" @tap.stop="confirmGoods(item.id,index)">
							确认收货
						</view>
					<!-- 	<view class="btn action" @click.stop="onEvaluate">
							<text>评价</text>
						</view> -->
					</view>
				</view>
			</view>
			<view v-else>
				<u-empty mode="data" marginTop="100" text="  "></u-empty>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				empty:{
					use : true ,
					icon : null ,
					tip : "暂无相关数据",
					btnText : "",
					fixed: false,
					top: "100rpx",
					zIndex: 99
				},
				OrderType: 0,
				goodsList:[],
				page:1,
				tab:-1,
				pageSize:10,
			};
		},
		onLoad(params) {
			this.OrderType = params.type;
			console.log(params,1111)
			//动态修改状态栏的颜色
			uni.setNavigationBarColor({
				frontColor:"#ffffff",
				backgroundColor:"#ae87d8"
			})
			this.getOrderList()
		},
		methods:{
			//确认收货
			confirmGoods(id,index){
				this.$u.api.orderConfirm({order_id:id}).then(res => {
					if (res.status) {
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
				.catch(err => {
					console.log(err);
				})
			},
			// 付款
			confirmmeet(id,item){
				let _this = this
				uni.login({
					success: function(res) {
						console.log('uni.logo')
						//魅力值抵扣
						_this.$u.api.orderPay({
							order_id:id,
							code: res.code
						})
						.then(res=>{
							console.log(res,'registerorder_create');
							let result = res.msg
							if(res.status){
								// 支付成功的回调中 创建绘本馆成功
								uni.showToast({
									title: '支付成功',
									icon: 'success',
									duration: 1500,
									success(){
										console.log('success')
										uni.redirectTo({
											url: '/pages/PayResult/PayResult',
										})
										
									}
								});
							}else if(res.code==-7){
								//微信支付
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: res.msg.timeStamp, // 时间戳从1970年1月1日至今的秒数，即当前的时间
									nonceStr: res.msg.nonceStr, // 随机字符串，长度为32个字符以下
									package: res.msg.package, // 统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=xx
									signType:res.msg.signType, //签名算法，暂支持 MD5
									paySign:  res.msg.paySign, // 签名
									success: function (res) {
										// 支付成功的回调中 创建绘本馆成功
										uni.showToast({
											title: '微信支付成功',
											icon: 'success',
											duration: 1500,
											success(){
												uni.redirectTo({
													url: '/pages/PayResult/PayResult',
												})
												
											}
										});
										
										
									},
									fail: function (err) {
										// 支付失败的回调中 用户未付款
										uni.showToast({
											title: '支付取消',
											duration: 1500,
											image: '/static/png/error_icon.png',
											success: function(){
												uni.navigateBack()
												
											}
										});
									}
								});
								
							}else{
								uni.showToast({
									title:res.msg,
									icon:'none'
								})
							}
							
						})
					}
						
				})
			},
			// 取消订单
			cancel(para,index) {
				uni.showModal({
					title: '温馨提醒',
					confirmText: "确定取消",
					content: "确定要取消该订单吗？",
					success: res => {
						if (res.confirm) {
							this.$u.api.orderCancel({
									order_id: para
								})
								.then(res => {
									console.log(res);
									uni.showToast({
										icon: 'none',
										title: res.msg
									})
									if (res.status) {
										this.goodsList.splice(index, 1)
									}
								})
								.catch(err => {
									console.log(err);
								})
						}
					}
				})
			},
			/*下拉刷新的回调, 有三种处理方式:*/
			  downCallback(){
			    this.mescroll.endSuccess();
			  },
			  /*上拉加载的回调*/
			  upCallback(page) {
			    //联网加载数据
				let _this = this
			    this.$u.api.orderAlist({tab:this.OrderType,}).then(res=>{
					  console.log(res,'商品列表')
			    	//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
			    	//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
			    
			    	//方法一(推荐): 后台接口有返回列表的总页数 totalPage
			    	this.mescroll.endByPage(this.pageSize, res.msg.totalPage); //必传参数(当前页的数据个数, 总页数)
			    
			    	//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
			    	//this.mescroll.endBySize(res.list.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
			    
			    	//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
			    	// this.mescroll.endSuccess(res.msg.length, false); //必传参数(当前页的数据个数, 是否有下一页true/false)
			      
			    	//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
			    	// this.mescroll.endSuccess(res.list.length);
					if(_this.page == 1){_this.goodsList = [];} //如果是第一页需手动制空列表
					_this.goodsList =  _this.goodsList.concat(res.msg.list); //如果是第一页需手动制空列表
					// this.goodsList =  res.msg.list; //如果是第一页需手动制空列表
					return false
			    // 	//设置列表数据
			//     	if(this.page == 1||this.page<res.msg.totalPage){
					// 	this.goodsList =  res.msg.list; //如果是第一页需手动制空列表
					// }else{
					// 	this.goodsList = this.goodsList.concat(res.msg.list); // 注意不是this.msgList.concat
					// }
			    }).catch(()=>{
			    	//联网失败, 结束加载
			    	this.mescroll.endErr();
			    })
			  },
			// 订单列表
			getOrderList(){
				this.$u.api.ordersList({
					page:this.page,
					tab:this.tab
				}).then(res => {
					console.log(res,'1111')
						if (res.status) {
							this.list = res.msg.list
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			/**
			 * 返回点击
			 */
			onBack(){
				uni.navigateBack();
			},
			/**
			 * 订单tab点击
			 */
			onOrderTab(type){
				this.OrderType = type;
				this.upCallback()
				console.log(type,'type')
				// #ifdef H5
				uni.redirectTo({
					url: '/pages/MyOrderList/MyOrderList?type=' + type,
				})
				//#endif
			},
			/**
			 * 订单列表点击
			 */
			onOrderList(id){
				uni.navigateTo({
					url: '/pages/OrderDetails/OrderDetailsConverge?id='+id,
				})
			},
			/**
			 * 查看物流
			 */
			tologistics(id,num){
				uni.navigateTo({
					url: '/pages/logisticsTrack/index?id='+id+'&num='+num,
				})
			},
		  /**
		   * 评价点击
		   */
		  onEvaluate(){
				  uni.navigateTo({
			  url: '/pages/MyEvaluatePush/MyEvaluatePush'
			})
		  }
		}
	}
</script>

<style scoped lang="scss">
	@import 'MyOrderList.scss';
	.status-btn{
		// display: flex;
		// align-items: center;
		// justify-content: flex-end;
		// width: 100%;
		// height:initial;
		// padding:0 20rpx;
	}
</style>
